<!--
 * @Author: chenwenda316
 * @Date: 2022-12-14 13:40:40
 * @LastEditTime: 2023-01-27 16:57:04
 * @FilePath: \app\class_app_dev\src\components\BlogItem.vue
-->
<template>
    <n-card style="width:100%">
        <template #header>
            <div style="text-align: left;">
                <n-h1 style="margin: 0px;" prefix="bar">
                    <strong>
                        {{ title }}
                    </strong>
                </n-h1>
            </div>
        </template>
        <NThing :content-indented="true" content-style="width:100%" style="width:100%">
            <template #avatar>
                <NAvatar :src="avatar" fallback-src="/avatar-defalut-small.webp">
                </NAvatar>
            </template>
            <template #header>
                {{ author }}
            </template>
            <template #description>
                <n-text depth="3">
                    发布于
                </n-text>
                <n-time :time="Number(date)" format="yyyy-MM-dd HH:mm:ss" />
                <!-- {{ date }} -->
            </template>
        </NThing>

        <div style="background-color:rgba(255,255,255,0);width:100%;" v-html="output"></div>

        <template #action>
            <NSpace>
                <NButton type="success" @click="comment">评论</NButton>
            </NSpace>
        </template>
    </n-card>
</template>

<script setup lang="ts">
import { NCard, NText, NH1, NThing, NTime, NAvatar, NButton, NSpace, NImage } from "naive-ui";
import type { Tokens, RendererExtension, RendererExtensionFunction, RendererObject } from 'marked'
import { ref, h, computed } from "vue";

// 导入 Markdown 渲染器
import { Marked } from 'marked'

// 导入数学公式插件
import markedKatex from "marked-katex-extension";
import "katex/dist/katex.min.css";

// 导入语法高亮插件
import { markedHighlight } from "marked-highlight";
import "highlight.js/styles/atom-one-light.min.css";
import hljs from 'highlight.js';

// 防止xss攻击
import DOMPurify from 'dompurify';


// 代码高亮配置
const marked = new Marked(
    markedHighlight({
        emptyLangClass: 'hljs',
        langPrefix: 'hljs language-',
        highlight(code, lang, info) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
        }
    })
);

// 配置 katex
marked.use(markedKatex({
    nonStandard: true
}));

// 给 img 标签设置手动宽度，否则排版会出问题
const renderer: RendererObject = {
    image(token): string {
        console.log(token);
        return `<img src="${token.href}" alt="${token.text}" style="max-width:100%;text-algin:center">`;
    }
};
marked.use({ renderer });

// 定义插槽
const props = defineProps(["msg", "title", "date", "author", "avatar"]);



// 过滤xss并渲染
const output = computed(() => {
    return marked.parse(DOMPurify.sanitize(props.msg || ''));
}

)

// 评论回调函数
function comment(): void {
    window.$utils.message.error("功能未实现")
}


</script>